<template>
  <div class="dashboard">
    <div class="dashboard-container">
      <div class="dashboard-text" style="font-size: 38px">
        <svg-icon icon-class="welcome" style="font-size: 100px;margin-right: 10px"></svg-icon>
        欢迎登录！
      </div>
      <el-button v-waves type="danger"
                 size="large"
                 @click="logout"
      >
        <svg-icon icon-class="logout"></svg-icon>
        退出登录
      </el-button>
    </div>
    <!--<div class="dashboard-container">-->
      <!--<div class="dashboard-text">-->
        <!--<svg-icon icon-class="avatar" style="font-size: 100px;margin-right: 10px"></svg-icon>-->
        <!--管理员：{{account}}</div>-->
      <!--&lt;!&ndash;<el-button v-waves type="primary"&ndash;&gt;-->
                 <!--&lt;!&ndash;size="large"&ndash;&gt;-->
                 <!--&lt;!&ndash;@click="toInfo"&ndash;&gt;-->
      <!--&lt;!&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;<svg-icon icon-class="user"></svg-icon>&ndash;&gt;-->
        <!--&lt;!&ndash;个人中心&ndash;&gt;-->
      <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
      <!--<el-button v-waves type="primary"-->
                 <!--size="large"-->
                 <!--@click="toModifyPwd"-->
      <!--&gt;-->
        <!--<svg-icon icon-class="password"></svg-icon>-->
        <!--修改密码-->
      <!--</el-button>-->
    <!--</div>-->
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves/index.js'

export default {
  name: 'dashboard',
  computed: {
    ...mapGetters([
      'account'
    ])
  },
  directives: {
    waves
  },
  methods: {
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    toModifyPwd() {
      this.$router.push('/user/modifyPwd')
    },
    toInfo() {
      this.$router.push('/user/info')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  /*height: 100%;*/
  height: calc(100vh - 195px);
  padding: 30px;
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  &-container {
    padding: 30px;
    background-color: #f2f4f7;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    &:first-child {
      margin-bottom: 30px;
    }

  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    color: #444;
    margin-bottom: 20px;
  }
  .svg-icon {
    position: relative;
    top: -2px;
  }
}
</style>
